<template>
  <CloudCharts :options="options"></CloudCharts>
</template>
<script lang="ts" setup>
import {
  getApiSiteBandwidthApi,
  getApiSiteHitApi,
  getApiSiteRequestApi,
  getApiSiteTrafficApi
} from '@/apis/modules/resolve/statistics'
import { useLineCharts } from '@/components/cloud-charts'
import type { Strategies } from '@/types/common'
import { byteConvertSite, formatChartsUnix, getChartData } from '@/utils'
import dayjs from 'dayjs'
import useTableColumn from './column'
const { staNumberFormat } = useTableColumn()
interface IProps {
  type: 'traffic' | 'bandwidth' | 'request' | 'hitRate'
  timeDate: any
  mathRandom: number
}
const props = withDefaults(defineProps<IProps>(), {
  type: 'traffic'
})

const time = ref({
  start_time: '',
  end_time: ''
})
//流量:总流量-缓存流量-回源流量
const BytesData = ref([])
const HitBytesData = ref([])
//const OriginBytesData = ref([])
//带宽:带宽峰值
const BandwidthData = ref([])
//请求数:请求数-命中数
const RequestTotalData = ref([])
const HitTotalData = ref([])
//命中率:请求命中率-流量命中率
const RequestRateData = ref([])
const TrafficRateData = ref([])

const clientData = ref([])
const consumeData = ref([])
const times = ref<any[]>([])
const unitData = ref<string>('day')
const dataSource = ref<any[]>([
  {
    label: '',
    data: clientData
  },
  {
    label: '',
    data: consumeData
  }
])

const colorsList = ref(['#2158E8', '#882DE7', '#00AB41'])

const apiMapValueAxisUnit = (val: number | string) => {
  if (val === '-') {
    return '-'
  }
  if (props.type === 'traffic') {
    return byteConvertSite(Number(val))
  } else if (props.type === 'bandwidth') {
    return byteConvertSite(Number(val), 'bps')
  } else if (props.type === 'request') {
    return (
      staNumberFormat(Number(val)).value + staNumberFormat(Number(val)).unit
    )
  } else if (props.type === 'hitRate') {
    return Number(val).toFixed(2) + '%'
  }
}

const apiMapYAxisUnit = (val: number | string) => {
  if (val === '-') {
    return '-'
  }
  if (props.type === 'traffic') {
    return byteConvertSite(Number(val))
  } else if (props.type === 'bandwidth') {
    return byteConvertSite(Number(val), 'bps')
  } else if (props.type === 'request') {
    return (
      staNumberFormat(Number(val)).value + staNumberFormat(Number(val)).unit
    )
  } else if (props.type === 'hitRate') {
    return Number(val) + '%'
  }
}

const { options } = useLineCharts({
  categories: times,
  dataSource: dataSource,
  legendPosition: 'tr',
  colors: colorsList.value,
  valueFormatter: (val) => apiMapValueAxisUnit(val),
  YAxisFormatter: (val) => apiMapYAxisUnit(val),
  labelFormatter: (val) => formatChartsUnix(val, unitData.value)
})

/** 获取流量数据 */
const getTraffic = () => {
  const { start_time, end_time } = time.value
  getApiSiteTrafficApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    is_overview: 1
  }).then((res) => {
    const {
      seriesData: bytes,
      xAxisData,
      unit
    } = getChartData(
      res?.list ?? [],
      Number(start_time),
      Number(end_time),
      'bytes_total',
      'time'
    )
    const { seriesData: hit_bytes } = getChartData(
      res?.list ?? [],
      Number(start_time),
      Number(end_time),
      'hit_bytes_total',
      'time'
    )
    // const { seriesData: origin_bytes } = getChartData(
    //   res?.list ?? [],
    //   Number(start_time),
    //   Number(end_time),
    //   'origin_bytes_total',
    //   'time'
    // )
    BytesData.value = bytes
    HitBytesData.value = hit_bytes
    // OriginBytesData.value = origin_bytes
    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '总流量',
        data: BytesData
      },
      {
        label: '缓存流量',
        data: HitBytesData
      }
      // {
      //   label: '回源流量',
      //   data: OriginBytesData
      // }
    ]
    colorsList.value = ['#2158E8', '#882DE7']
  })
}

/**获取带宽数据 */
const getBandwidthData = () => {
  const { start_time, end_time } = time.value
  getApiSiteBandwidthApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    is_overview: 1
  }).then((res) => {
    const {
      seriesData: bandwidth,
      xAxisData,
      unit
    } = getChartData(
      res?.list || [],
      Number(start_time),
      Number(end_time),
      'bandwidth',
      'time'
    )
    BandwidthData.value = bandwidth

    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '带宽',
        data: BandwidthData
      }
    ]
    colorsList.value = ['#165DFF']
  })
}

/** 获取请求数 */
const getRequestsData = () => {
  const { start_time, end_time } = time.value
  getApiSiteRequestApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    is_overview: 1
  }).then((res) => {
    const {
      seriesData: hit_request_count_total,
      xAxisData,
      unit
    } = getChartData(
      res?.list || [],
      Number(start_time),
      Number(end_time),
      'hit_request_count_total',
      'time'
    )
    const { seriesData: request_count_total } = getChartData(
      res?.list || [],
      Number(start_time),
      Number(end_time),
      'request_count_total',
      'time'
    )
    RequestTotalData.value = request_count_total
    HitTotalData.value = hit_request_count_total

    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '请求数',
        data: RequestTotalData
      },
      {
        label: '命中数',
        data: HitTotalData
      }
    ]
    colorsList.value = ['#165DFF', '#00AB41']
  })
}

/** 获取命中率 */
const getHitRate = () => {
  const { start_time, end_time } = time.value
  getApiSiteHitApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    is_overview: 1
  }).then((res) => {
    const {
      seriesData: request_hit_rate,
      xAxisData,
      unit
    } = getChartData(
      res?.list || [],
      Number(start_time),
      Number(end_time),
      'request_hit_rate',
      'time'
    )
    const { seriesData: traffic_hit_rate } = getChartData(
      res?.list || [],
      Number(start_time),
      Number(end_time),
      'traffic_hit_rate',
      'time'
    )
    RequestRateData.value = request_hit_rate
    TrafficRateData.value = traffic_hit_rate

    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '请求命中率',
        data: RequestRateData
      },
      {
        label: '流量命中率',
        data: TrafficRateData
      }
    ]
    colorsList.value = ['#165DFF', '#00AB41']
  })
}

onMounted(() => {
  timeReset()
})

const timeReset = () => {
  time.value.start_time = String(dayjs(props.timeDate).unix())
  time.value.end_time = String(dayjs(props.timeDate).unix() + 86399)
  getTraffic()
}

const apiMap: Strategies<() => void> = {
  traffic: getTraffic,
  bandwidth: getBandwidthData,
  request: getRequestsData,
  hitRate: getHitRate
}

watch(
  () => props.type,
  () => {
    if (Object.prototype.hasOwnProperty.call(apiMap, props.type)) {
      apiMap[props.type]()
    }
    //timeReset()
  }
)

watch(
  () => props.mathRandom,
  () => {
    //timeReset()
    if (Object.prototype.hasOwnProperty.call(apiMap, props.type)) {
      apiMap[props.type]()
    }
  }
)
</script>
